<template>
  <h2>Home 组件 --- {{ count }}</h2>
  <button @click="count++">+1</button>
</template>

<script setup>
import { ref, onUnmounted, onMounted, onActivated, onDeactivated } from 'vue'

const count = ref(0)

// onMounted(() => {
//   console.log('触发了Home组件的onMounted')
// })

// onUnmounted(() => {
//   console.log('触发了Home组件的onUnmounted')
// })

onMounted(() => console.log('Home 组件挂载完成！'))
onUnmounted(() => console.log('Home 组件卸载完成！'))

// 组件缓存相关的生命周期函数
onActivated(() => {
  console.log('组件挂载/激活了')
})
onDeactivated(() => {
  console.log('组件卸载/被缓存了')
})
</script>

<style scoped></style>
